experimental_useTransition React: Kuasai Transisi Aplikasi Anda

Dalam dunia pengembangan web yang berkembang pesat, menyediakan pengalaman pengguna yang lancar dan responsif adalah hal yang terpenting. Pengguna mengharapkan interaksi yang mulus, dan setiap lag atau penundaan yang dirasakan dapat menyebabkan frustrasi dan pengabaian. React, pustaka JavaScript terkemuka untuk membangun antarmuka pengguna, menawarkan alat canggih untuk mengatasi tantangan ini. Salah satu alat tersebut adalah hook experimental_useTransition, komponen krusial untuk mengelola transisi dan meningkatkan kinerja aplikasi.

Memahami Pentingnya Transisi

Transisi adalah dasar dari pengalaman pengguna yang positif. Transisi adalah isyarat visual dan interaktif yang memandu pengguna melalui aplikasi Anda, memberikan umpan balik dan rasa kontinuitas. Ketika diimplementasikan secara efektif, transisi dapat:

• Meningkatkan persepsi kinerja, membuat aplikasi terasa lebih cepat dan lebih responsif.
• Memberikan umpan balik visual, mengonfirmasi tindakan pengguna dan mengarahkan perhatian mereka.
• Meningkatkan daya tarik estetika aplikasi secara keseluruhan, membuatnya lebih menarik.

Sebaliknya, transisi yang dikelola dengan buruk dapat menyebabkan:

• Pengalaman pengguna yang kaku dan tidak responsif.
• Frustrasi dan persepsi negatif terhadap kualitas aplikasi.
• Peningkatan rasio pentalan (bounce rate) dan penurunan keterlibatan pengguna.

Memperkenalkan experimental_useTransition

Hook experimental_useTransition, seperti namanya, masih dalam tahap pengembangan dan dianggap eksperimental. Ini berarti API-nya mungkin berubah pada rilis React di masa mendatang. Namun, ia menawarkan mekanisme yang kuat untuk mengelola transisi dengan memungkinkan Anda menandai pembaruan sebagai transisi, sehingga memberi React lebih banyak kontrol atas bagaimana pembaruan tersebut diprioritaskan.

Secara spesifik, experimental_useTransition membantu Anda:

• Prioritaskan Pembaruan: Hook ini membedakan antara pembaruan mendesak (misalnya, input pengguna langsung seperti mengetik) dan pembaruan yang kurang mendesak (misalnya, mengambil data atau merender perubahan UI yang kompleks).
• Mencegah Pemblokiran UI: Hook ini memastikan bahwa pembaruan mendesak tidak terhalang oleh pembaruan yang kurang mendesak, menjaga UI tetap responsif bahkan selama proses latar belakang yang intensif.
• Memberikan Umpan Balik: Hook ini memungkinkan Anda untuk menunjukkan kepada pengguna bahwa transisi sedang berlangsung (misalnya, dengan indikator pemuatan).

Cara Kerja experimental_useTransition

Hook experimental_useTransition mengembalikan sebuah array yang berisi dua elemen:

1. isPending: Sebuah nilai boolean yang menunjukkan apakah sebuah transisi sedang berlangsung.
2. startTransition: Sebuah fungsi yang memungkinkan Anda untuk membungkus pembaruan state di dalam sebuah transisi.

Berikut adalah contoh dasarnya:

            import { experimental_useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = experimental_useTransition();
  const [data, setData] = React.useState(null);

  const handleClick = () => {
    startTransition(() => {
      // Simulasikan pengambilan data
      setTimeout(() => {
        setData({ message: 'Data dimuat!' });
      }, 2000);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Memuat...' : 'Muat Data'}
      </button>
      {data && <p>{data.message}</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini:

• startTransition membungkus pembaruan state yang mensimulasikan pengambilan data.
• isPending digunakan untuk menonaktifkan tombol dan menampilkan pesan 'Memuat...' saat transisi sedang berlangsung.

Studi Kasus dan Contoh Praktis

1. Menavigasi Antar Tampilan

Bayangkan sebuah aplikasi web, mungkin platform pemesanan perjalanan. Ketika pengguna mengklik tautan untuk melihat halaman detail penerbangan (misalnya, dari daftar hasil pencarian), Anda ingin menampilkan transisi yang mulus alih-alih pemuatan ulang halaman yang tiba-tiba. Anda dapat menggunakan experimental_useTransition untuk mengelola transisi ini:

            
import { experimental_useTransition } from 'react';
import { Link, useLocation } from 'react-router-dom'; // Atau router pilihan Anda

function FlightSearchResults() {
  const [isPending, startTransition] = experimental_useTransition();
  const location = useLocation();
  const [flightDetails, setFlightDetails] = React.useState(null);

  // Simulasikan pengambilan detail penerbangan berdasarkan parameter rute (misalnya, ID penerbangan)
  React.useEffect(() => {
    if (!location.pathname.startsWith('/flight/')) {
      setFlightDetails(null); // Atur ulang saat menavigasi keluar
      return;
    }
    const flightId = location.pathname.split('/').pop();
    startTransition(() => {
      // Simulasikan panggilan API - ganti dengan pengambilan data Anda yang sebenarnya
      setTimeout(() => {
        setFlightDetails({ id: flightId, airline: 'Contoh Airlines', origin: 'JFK', destination: 'LHR' });
      }, 1000);
    });
  }, [location.pathname, startTransition]);

  return (
    <div>
      <h2>Hasil Pencarian Penerbangan</h2>
      {/* Tampilkan hasil pencarian penerbangan di sini */}
      <ul>
        <li>
          <Link to="/flight/1234">Penerbangan 1234 (JFK ke LHR)</Link>
        </li>
      </ul>
      {isPending && <p>Memuat detail penerbangan...</p>}
      {flightDetails && (
        <div>
          <h3>Detail Penerbangan</h3>
          <p>Maskapai: {flightDetails.airline}</p>
          <p>Asal: {flightDetails.origin}</p>
          <p>Tujuan: {flightDetails.destination}</p>
        </div>
      )}
    </div>
  );
}

export default FlightSearchResults;

            

              
                Copy
              
            
          

Dalam contoh ini, ketika pengguna mengklik tautan penerbangan, startTransition digunakan untuk membungkus operasi asinkron pengambilan detail penerbangan. Saat detail sedang dimuat, pesan 'Memuat...' ditampilkan, memberikan umpan balik kepada pengguna. Ini mencegah UI tampak tidak responsif selama proses pengambilan data. Pendekatan ini dapat diadaptasi untuk kasus penggunaan navigasi apa pun, mulai dari berpindah antar halaman produk di toko e-commerce hingga menavigasi melalui bagian-bagian profil media sosial.

2. Memfilter dan Mengurutkan Data

Pertimbangkan sebuah situs web e-commerce di mana pengguna dapat memfilter dan mengurutkan produk berdasarkan berbagai kriteria (misalnya, harga, merek, ukuran). Menerapkan filter atau opsi pengurutan sering kali memerlukan pengambilan ulang atau pemrosesan ulang data. Menggunakan experimental_useTransition dapat membuat interaksi ini terasa jauh lebih lancar:

            
import { experimental_useTransition } from 'react';

function ProductList() {
  const [isPending, startTransition] = experimental_useTransition();
  const [products, setProducts] = React.useState([]);
  const [filters, setFilters] = React.useState({});

  // Simulasikan pengambilan produk dengan filter dan pengurutan - ganti dengan panggilan API yang sebenarnya
  React.useEffect(() => {
    startTransition(() => {
      // Simulasikan panggilan API untuk mengambil produk yang difilter
      setTimeout(() => {
        const filteredProducts = // ... logika pemfilteran Anda berdasarkan 'filters'
        setProducts(filteredProducts);
      }, 1000);
    });
  }, [filters, startTransition]);

  const handleFilterChange = (newFilters) => {
    setFilters(newFilters);
  };

  return (
    <div>
      <h2>Daftar Produk</h2>
      {/* Kontrol filter (misalnya, elemen select, kotak centang) */}
      <FilterControls onChange={handleFilterChange} />
      {isPending && <p>Memuat produk...</p>}
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

Ketika pengguna mengubah filter (misalnya, memilih rentang harga), startTransition membungkus pembaruan ke state products. Hal ini memungkinkan UI untuk tetap responsif saat data yang difilter sedang diambil. Indikator pemuatan (`<p>Memuat produk...</p>`) memberikan umpan balik kepada pengguna selama transisi. Pendekatan ini dapat diterapkan pada antarmuka apa pun di mana data perlu diambil ulang atau diproses ulang berdasarkan interaksi pengguna, seperti di dasbor visualisasi data.

3. Menerapkan Pembaruan Optimistis

Pembaruan optimistis adalah teknik di mana Anda memperbarui UI secara langsung berdasarkan tindakan pengguna, dengan asumsi bahwa tindakan tersebut akan berhasil, dan kemudian melakukan rekonsiliasi dengan server. Ini dapat membuat aplikasi terasa sangat responsif, terutama untuk tindakan seperti menyimpan data atau menyukai postingan. experimental_useTransition dapat digunakan untuk mengelola transisi antara pembaruan optimistis dan konfirmasi server:

            
import { experimental_useTransition } from 'react';

function LikeButton({ postId }) {
  const [isPending, startTransition] = experimental_useTransition();
  const [isLiked, setIsLiked] = React.useState(false);

  const handleLikeClick = () => {
    startTransition(() => {
      // Perbarui UI secara optimistis
      setIsLiked(!isLiked);

      // Simulasikan permintaan jaringan untuk memperbarui status suka di server
      setTimeout(() => {
        // Ganti ini dengan panggilan API Anda yang sebenarnya
        // Jika pembaruan server gagal, Anda akan mengembalikan perubahan UI di sini (misalnya, setIsLiked(isLiked))
      }, 1000);
    });
  };

  return (
    <button onClick={handleLikeClick} disabled={isPending}>
      {isPending ? 'Menyukai...' : (isLiked ? 'Batal Suka' : 'Suka')}
    </button>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, ketika pengguna mengklik tombol 'Suka', UI segera diperbarui untuk mencerminkan suka tersebut. Fungsi startTransition kemudian membungkus logika untuk mengirim suka ke server. Saat permintaan server sedang berlangsung, UI tetap responsif, dan tombol menampilkan pesan 'Menyukai...'. Ini menciptakan pengalaman pengguna yang lebih cepat dan lebih menarik. Ini dapat diadaptasi untuk situasi seperti memposting komentar, menyimpan data formulir, dan tindakan pengguna lain yang melibatkan komunikasi server asinkron.

Praktik Terbaik dan Pertimbangan

• Gunakan dengan Bijak: Jangan terlalu sering menggunakan experimental_useTransition. Ini paling bermanfaat untuk transisi yang melibatkan operasi asinkron atau pembaruan UI yang kompleks yang tidak ingin Anda blokir pada thread utama. Terapkan ini dengan bijaksana untuk menghindari kerumitan kode yang berlebihan.
• Berikan Umpan Balik yang Jelas: Selalu berikan umpan balik visual kepada pengguna selama transisi. Gunakan indikator pemuatan, bilah kemajuan, atau isyarat visual lainnya untuk memberi tahu pengguna bahwa aplikasi sedang bekerja. Ini membangun kepercayaan dan mengurangi persepsi kelambatan.
• Tangani Kesalahan: Saat berurusan dengan operasi asinkron dalam transisi, terapkan penanganan kesalahan yang kuat. Jika sebuah operasi gagal (misalnya, permintaan jaringan habis waktu), pastikan untuk mengembalikan setiap pembaruan UI optimistis atau menampilkan pesan kesalahan yang sesuai kepada pengguna. Ini penting untuk pengalaman pengguna yang andal.
• Pertimbangkan Konteks: Pahami konteks di mana Anda menggunakan experimental_useTransition. Misalnya, dalam aplikasi kompleks dengan beberapa operasi konkuren, Anda mungkin perlu mengelola cakupan transisi Anda dengan hati-hati untuk menghindari efek samping yang tidak diinginkan. Tinjau dokumentasi React dengan cermat.
• Pemantauan Kinerja: Pantau kinerja transisi Anda. Gunakan alat pengembang browser (seperti Chrome DevTools) untuk mengidentifikasi hambatan kinerja atau area untuk optimisasi. Ukur waktu yang dibutuhkan transisi untuk selesai. Ini membantu menyempurnakan implementasi Anda.
• Aksesibilitas: Pastikan transisi Anda dapat diakses oleh semua pengguna, termasuk mereka yang memiliki disabilitas. Sediakan cara alternatif untuk berinteraksi dengan aplikasi, seperti navigasi keyboard dan dukungan pembaca layar, untuk memastikan pengalaman yang sepenuhnya inklusif.
• Konkurensi dan Batas Konkurensi: Sadarilah bahwa transisi dapat berjalan secara konkuren. React dapat menginterupsi transisi jika ada pembaruan dengan prioritas lebih tinggi yang masuk. Ini bisa bermanfaat untuk responsivitas, tetapi Anda mungkin perlu mempertimbangkan potensi kondisi balapan (race condition) jika transisi Anda saling bergantung.
• Dokumentasikan dan Beri Komentar: Dokumentasikan dengan jelas penggunaan experimental_useTransition Anda. Jelaskan alasan menggunakannya dan pertimbangan atau trade-off yang terlibat. Komentar yang baik membuat kode lebih mudah dipahami dan dipelihara, terutama untuk proyek besar atau kompleks.

Perspektif Global: Manajemen Transisi Lintas Budaya

Prinsip-prinsip manajemen transisi yang baik berlaku secara universal, terlepas dari lokasi atau budaya. Namun, implementasi spesifik dan isyarat visual mungkin perlu disesuaikan dengan preferensi lokal. Berikut adalah bagaimana perspektif global dapat memengaruhi desain transisi:

• Lokalisasi: Pastikan semua teks dalam transisi diterjemahkan ke dalam bahasa pilihan pengguna. Pertimbangkan perbedaan dalam arah bahasa (misalnya, kiri-ke-kanan vs. kanan-ke-kiri) saat merancang animasi dan transisi.
• Sensitivitas Budaya: Hindari penggunaan elemen visual atau animasi yang mungkin menyinggung atau tidak pantas di budaya tertentu. Teliti norma budaya audiens target Anda dan sesuaikan desain Anda. Palet warna, gaya animasi, dan citra harus menghormati kepekaan budaya.
• Kondisi Jaringan: Pertimbangkan kecepatan jaringan tipikal di berbagai wilayah. Optimalkan kinerja aplikasi Anda untuk memastikan transisi yang mulus bahkan di area dengan koneksi internet yang lebih lambat. Uji aplikasi Anda dengan berbagai kondisi jaringan menggunakan alat pembatas jaringan (network throttling).
• Pendekatan Mobile-First: Rancang transisi Anda dengan mempertimbangkan perangkat seluler. Optimalkan aplikasi Anda untuk interaksi sentuh dan pastikan transisi responsif dan bekerja dengan baik di berbagai ukuran layar. Penggunaan perangkat seluler meningkat pesat secara global.
• Aksesibilitas: Pastikan transisi tidak berdampak negatif pada aksesibilitas. Sediakan cara alternatif untuk berinteraksi dengan aplikasi, seperti navigasi keyboard dan dukungan pembaca layar, untuk memastikan pengalaman yang sepenuhnya inklusif. Pertimbangkan preferensi pengguna seperti opsi gerakan yang dikurangi (reduced motion).
• Pengujian Pengguna: Lakukan pengujian pengguna dengan individu dari berbagai latar belakang budaya untuk mengumpulkan umpan balik tentang transisi Anda. Ini akan membantu Anda mengidentifikasi masalah kegunaan atau kepekaan budaya yang mungkin perlu ditangani. Umpan balik pengguna sangat penting untuk produk global yang sukses.

Sebagai contoh, sebuah situs web pemesanan perjalanan yang menargetkan pengguna di Jepang mungkin memprioritaskan animasi dan transisi yang halus dan elegan, yang mencerminkan prinsip desain Jepang. Sebaliknya, situs serupa yang menargetkan pengguna di Brasil mungkin menggunakan warna yang lebih cerah dan animasi dinamis yang selaras dengan preferensi budaya Brasil. Ini adalah contoh ilustratif; penelitian pengguna yang menyeluruh dan pertimbangan konteks lokal adalah kuncinya.

Optimisasi Kinerja secara Mendetail

Di luar manfaat responsivitas yang langsung terasa, manajemen transisi yang efektif, termasuk penggunaan experimental_useTransition, memberikan kontribusi signifikan terhadap kinerja aplikasi secara keseluruhan. Berikut caranya:

• Mengurangi Waktu Pemblokiran: Dengan memungkinkan React untuk memprioritaskan pembaruan, transisi dapat meminimalkan waktu thread utama diblokir. Ini penting untuk menjaga pengalaman pengguna yang mulus, terutama selama operasi yang intensif secara komputasi seperti pengambilan data atau rendering UI yang kompleks.
• Rendering yang Efisien: Dengan menggunakan experimental_useTransition, Anda dapat menghindari render ulang UI yang tidak perlu. Misalnya, saat memfilter dataset besar, Anda dapat memicu transisi untuk memperbarui data yang terlihat sementara pemfilteran dilakukan di latar belakang. Ini menghindari render ulang seluruh pohon komponen dengan setiap perubahan filter sementara, sehingga meningkatkan kinerja.
• Peningkatan Persepsi Kinerja: Meskipun waktu pemuatan sebenarnya untuk suatu operasi sama, penggunaan transisi dapat membuat aplikasi terasa lebih cepat. Dengan memberikan umpan balik visual dan menjaga responsivitas UI, pengguna merasakan aplikasi lebih berkinerja.
• Mengurangi 'Jank': Jank mengacu pada kegagapan visual atau frame yang hilang di UI. Transisi dapat membantu mengurangi jank dengan memastikan bahwa pembaruan UI yang krusial tidak tertunda oleh pembaruan yang kurang penting. Ini dicapai melalui rendering yang diprioritaskan.
• Ukuran Bundle yang Dioptimalkan: Meskipun experimental_useTransition itu sendiri tidak secara langsung memengaruhi ukuran bundle, penggunaannya mendorong praktik yang secara tidak langsung berkontribusi pada bundle yang lebih kecil. Misalnya, dengan memisahkan pembaruan UI dari operasi pengambilan data, Anda dapat meminimalkan jumlah kode yang diperlukan untuk merender setiap komponen dan menjaga bundle Anda tetap ringkas.
• Integrasi Lazy Loading: Gabungkan `experimental_useTransition` dengan teknik seperti pemisahan kode (code splitting) dan lazy loading untuk lebih mengoptimalkan kinerja. Lazy loading dapat menunda pemuatan komponen yang tidak penting sampai dibutuhkan, mengurangi waktu muat awal dan meningkatkan responsivitas selama transisi.

Pertimbangan Aksesibilitas

Aksesibilitas adalah aspek krusial dalam menciptakan aplikasi web yang ramah pengguna dan inklusif. Saat menerapkan transisi, selalu pertimbangkan aksesibilitas. Berikut adalah beberapa pertimbangan utama:

• Sediakan Alternatif: Bagi pengguna yang memilih untuk tidak melihat animasi atau transisi (misalnya, mereka yang memiliki gangguan vestibular), sediakan cara untuk menonaktifkannya. Tawarkan pengaturan "gerakan yang dikurangi" yang menonaktifkan animasi dan transisi, memberikan pengalaman yang lebih mudah diakses.
• Navigasi Keyboard: Pastikan semua elemen yang terlibat dalam transisi dapat diakses melalui navigasi keyboard. Ini penting bagi pengguna yang tidak dapat menggunakan mouse atau perangkat penunjuk lainnya. Verifikasi bahwa fokus dikelola dengan benar selama transisi.
• Kompatibilitas Pembaca Layar: Pastikan pembaca layar mengumumkan perubahan yang terjadi selama transisi dengan benar. Gunakan atribut ARIA yang sesuai (misalnya, aria-live) untuk mengomunikasikan perubahan kepada pengguna pembaca layar. Pastikan informasi diperbarui dengan tepat.
• Umpan Balik yang Jelas: Gunakan bahasa yang jelas dan ringkas untuk menjelaskan apa yang terjadi selama transisi. Hindari jargon atau istilah teknis yang mungkin membingungkan pengguna. Gunakan label teks dan isyarat visual lainnya.
• Kontras yang Cukup: Pastikan warna yang digunakan dalam transisi memiliki kontras yang cukup terhadap latar belakang, terutama untuk teks dan elemen interaktif. Ikuti pedoman WCAG untuk kontras warna. Kontras meningkatkan keterbacaan.
• Kontrol Pengguna: Izinkan pengguna untuk mengontrol durasi dan kecepatan transisi. Ini bisa bermanfaat bagi pengguna dengan gangguan kognitif atau disabilitas lainnya. Tawarkan pengaturan untuk menyesuaikan kecepatan transisi.
• Pengujian dengan Teknologi Bantu: Uji transisi Anda dengan berbagai teknologi bantu, seperti pembaca layar, perangkat lunak pengenalan suara, dan emulator keyboard, untuk memastikan bahwa mereka dapat diakses oleh semua pengguna. Pengujian memastikan fungsionalitas.

Menerapkan praktik terbaik aksesibilitas meningkatkan pengalaman pengguna untuk semua orang, terlepas dari kemampuan mereka. Dengan mempertimbangkan aksesibilitas di seluruh proses desain dan pengembangan, Anda dapat membuat aplikasi web yang lebih inklusif dan ramah pengguna.

Studi Kasus dan Teknik Tingkat Lanjut

• Menggabungkan dengan Konkurensi: Fitur eksperimental React, termasuk rendering konkuren, bekerja dengan mulus dengan experimental_useTransition. Ini memungkinkan pembaruan yang lebih responsif dan efisien dengan memungkinkan React untuk menginterupsi dan memprioritaskan tugas rendering berdasarkan urgensinya.
• Grup Transisi: Dalam aplikasi kompleks dengan beberapa transisi konkuren, pertimbangkan untuk menggunakan grup transisi atau pustaka untuk mengelola urutan dan sinkronisasi transisi. Pustaka ini membantu mengoordinasikan transisi, seperti menganimasikan beberapa elemen yang masuk atau keluar dari layar secara bersamaan, untuk menciptakan efek yang lebih canggih.
• Debouncing dan Throttling: Saat berurusan dengan input pengguna yang memicu transisi (misalnya, input pencarian), pertimbangkan untuk menggunakan teknik debouncing atau throttling untuk membatasi frekuensi pembaruan. Ini membantu mencegah render ulang yang tidak perlu dan meningkatkan kinerja. Cegah masalah kinerja menggunakan teknik ini.
• Hook Kustom untuk Transisi: Untuk penggunaan kembali, enkapsulasi logika transisi dalam hook kustom. Ini mempromosikan organisasi kode dan memudahkan penerapan manajemen transisi di beberapa komponen dalam aplikasi Anda. Enkapsulasi meningkatkan kemudahan pemeliharaan.
• Server-Side Rendering (SSR): Saat menggunakan SSR, pertimbangkan dengan cermat cara mengelola transisi selama render awal. Pastikan konten awal yang dirender server ditampilkan dengan cepat dan transisi diterapkan dengan lancar setelah JavaScript sisi klien mengambil alih. SSR meningkatkan pengalaman pengguna.
• Integrasi dengan Pustaka (Library): Integrasikan experimental_useTransition dengan pustaka animasi seperti Framer Motion atau React Spring untuk menciptakan transisi yang lebih canggih dan menarik secara visual. Ini akan membantu menciptakan animasi yang kompleks.

Kesimpulan

experimental_useTransition adalah alat yang ampuh untuk mengelola transisi dalam aplikasi React dan meningkatkan pengalaman pengguna secara keseluruhan. Dengan memahami tujuannya, menerapkan praktik terbaik, dan mempertimbangkan perspektif global, Anda dapat membuat aplikasi yang terasa lebih cepat, lebih responsif, dan lebih menarik bagi pengguna di seluruh dunia. Seiring React terus berkembang, tetap terinformasi tentang fitur-fitur eksperimental ini sangat penting untuk membangun aplikasi web modern yang berkinerja tinggi. Rangkullah kekuatan transisi, dan buat aplikasi web Anda bersinar!

Ingatlah untuk selalu memprioritaskan pengalaman pengguna dan aksesibilitas saat menerapkan transisi. Upaya yang Anda investasikan dalam mengoptimalkan transisi Anda akan terbayar dalam bentuk peningkatan kepuasan dan keterlibatan pengguna.